<template>
  <div class='g-content-wrapper'>
    <header-top>大家都在看</header-top>
    <div class="g-content">
      <div class="hotSearchPlate">
        <h3 class="g-font-f2">热搜板块</h3>
        <div class="plate">
          <div v-for="(item, key) in board" :class="item.change | boardBg">
            <span>{{item.moduleName}}</span>
            {{item.change}}
            <div><img src="~assets/images/fire.png" alt=""><p>{{item.searchNum}}</p></div>
          </div>
        </div>
      </div>
      <div class="interval"></div>
      <div class="hotSearchStock">
        <h3 class="g-font-f2">热搜股票</h3>
        <ul>
          <li v-for="(item, key) in stock">
            <div>
              <p>{{item.strName}}</p>
              <p>{{item.strCode}}</p>
            </div>
            <div :class="item.change | stkColor">
              {{item.price}}
            </div>
            <div :class="item.change | stkColor">
              {{item.change}}
            </div>
            <div>
              <p class="bg-gray" :class="{'bg-red':key==0,'bg-orange':key==1,'bg-yellow':key==2}">
                <img src="~assets/images/fire.png" alt="" v-if="key < 3">
                <span>{{item.searchNum}}次</span>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import headerTop from '../common/HeaderTop'
  import remoteDAO from '@/common/remoteDAO'
  import constant from '@/common/constant'
  export default {
    name: 'topSearch',
    components: {
      headerTop
    },
    data() {
      return {
        board: '',
        stock: '',
        plateData: ''
      }
    },
    filters: {
      boardBg (change) {
        return change
          ? change.indexOf('+') == -1 ? 'bgGreen' : 'bgRed'
          : '';
      },
      stkColor (val) {
        return val ? (val.indexOf('+') == -1 ? 'green' : 'red') : '';
      }
    },
    methods: {
      getData() {
        let vm = this;

        remoteDAO.invoke(constant.InterfaceEnum.GET_TOP_SEARCH).then((result) => {
          result.board.forEach(item => {
            item.change = '';
          });
          vm.board = result.board;

          result.stock.forEach(item => {
            item.price = '';
            item.change = '';
          });
          vm.stock = result.stock

          vm.fetchStkData();
        }, () => {
          alert('系统问题，请稍后重试');
        })
      },
      // 获取股票实时行情
      fetchStkData () {
        console.log('111111111111')
        const stkCode = this.stock
            .map(item => item.strCode.indexOf('6') == 0 ? `SH${item.strCode}` : `SZ${item.strCode}`)
            .join('|');
<<<<<<< .mine
        console.log(stkCode)
        // remoteDAO.getStockData(stkCode).then(result => {
        //   this.stock.forEach((item, index) => {
        //     item.price = result.data[index].price;
        //     item.change = result.data[index].change;
        //   })
        //   this.fetchBoardData();
        // })
||||||| .r41048

        remoteDAO.getStockData(stkCode).then(result => {
          this.stock.forEach((item, index) => {
            item.price = result.data[index].price;
            item.change = result.data[index].change;
          })
          this.fetchBoardData();
        })
=======

        remoteDAO.getStockData(stkCode).then(result => {
          this.stock.forEach((item, index) => {
            item.price = result.data[index].price;
            item.change = result.data[index].change;
          })
          this.fetchBoardData();
        }, () => {
          alert('系统问题，请稍后重试')
        })
>>>>>>> .r41789
      },
      // 获取板块实时行情
      fetchBoardData () {
        const moduleCode = this.board.map(item => item.moduleCode).join('|');

        remoteDAO.getModuleData(moduleCode).then(result => {
          this.board.forEach(item => {
            item.change = result.data[item.moduleCode].change
          });
          this.nRateBoard = result.data;
        }, () => {
          alert('系统问题，请稍后重试')
        })
      }
    },
    created () {
      this.getData()
    }
  }
</script>
<style lang="less" scoped="">
  @import '../../assets/css/common.less';
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .bgRed{
    background:
      repeating-linear-gradient(-35deg,rgba(255,255,255,.1),rgba(255,255,255,.1) .0852rem,transparent 0,transparent 0.175rem) left,
      repeating-linear-gradient(35deg,rgba(255,255,255,.1),rgba(255,255,255,.1) .0852rem,transparent 0,transparent 0.175rem) right,
      repeating-linear-gradient(to right bottom,#f54545,#da4178);
    background-size: 50% 100%,50% 100%,100% 100%;
    background-repeat: no-repeat;
  }
  .bgGreen{
    background:
      repeating-linear-gradient(35deg,rgba(255,255,255,.1),rgba(255,255,255,.1) .0852rem,transparent 0,transparent 0.175rem) left,
      repeating-linear-gradient(-35deg,rgba(255,255,255,.1),rgba(255,255,255,.1) .0852rem,transparent 0,transparent 0.175rem) right,
      repeating-linear-gradient(to right bottom,#01929f,#02b88d);
    background-size: 50% 100%,50% 100%,100% 100%;
    background-repeat: no-repeat;
  }
  .hotSearchPlate{
    height:2.1rem;
    width:100%;
    h3{
      text-align: left;
      width: 95%;
      margin: 0.15rem auto;
      font-weight: normal;
    }
  }
  .plate{
    width:95%;
    margin: 0.15rem auto;
    height: 1.5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    div{
      width: 32%;
      height:0.7rem;
      border-radius: 0.05rem;
      position: relative;
      font-size: 0.14rem;
      line-height: 0.22rem;
      color: #ffffff;
      div {
        border-radius: 0 0 0.05rem 0.05rem;
      }
      span{
        display: block;
        margin-top: 0.05rem;
      }
      div{
        position: absolute;
        bottom: 0;
        height: 0.2rem;
        width: 100%;
        font-size: 0.10rem;
        background: rgba(255,255,255,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          display: block;
          width: 0.1rem;
          height: 0.1rem;
          margin-right: 0.04rem;
        }
        p{
          height: 100%;
        }
      }
    }
  }
  .hotSearchStock{
    width:100%;
    height: auto;
    h3{
      text-align: left;
      text-indent: 0.1rem;
      height: 0.5rem;
      line-height: 0.5rem;
      border-bottom: 1px solid #dddddd;
      font-weight: normal;
    }
    ul{
      li{
        width: 100%;
        height: 0.5rem;
        margin: 0 auto;
        border-bottom: 1px solid #dddddd;
        display: flex;
        justify-content: space-around;
        align-items: center;
        div{
          width:25%;
        }
        div:first-child{
          font-size: 0.15rem;
          text-align: left;
          text-indent: 0.2rem;
          color: rgb(34,34,34);
          p:last-child{
            font-size: 0.12rem;
            margin-top: 0.03rem;
            color: #999999;
          }
        }
        div:last-child{
          display: flex;
          justify-content: center;
          align-items: center;
          p{
            width:0.75rem;
            padding: 0.01rem 0 0.01rem 0;
            height:auto;
            font-size: 0.12rem;
            color:white;
            border-radius: 0.05rem;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
              display: block;
              height:0.09rem;
              margin-left: 0.01rem;
              margin-right: 0.02rem;
            }
          }
        }
      }
      li:last-child{
        border-bottom: none;
      }
    }
  }
  .green{
    color: rgb(26,174,82) !important;
  }
  .red{
    color:rgb(235,51,59) !important;
  }

  .bg-gray {
    background-color: #999999;
    &.bg-red {
      background-color: #EB333B;
    }
    &.bg-orange {
      background-color: #FF8420;
    }
    &.bg-yellow {
      background-color: #FFAD5C;
    }
  }
</style>
